<template>
  <div class="app-container" style="width: 500px;height: 100%">
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="1-1"
          class="el-menu-vertical-demo"
        >
          <el-submenu index="1-1">
            <template slot="title">
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="clickMain(1)">个人编辑</el-menu-item>
              <el-menu-item index="1-2" @click="clickMain(2)">修改密码</el-menu-item>
              <el-menu-item index="1-3" @click="clickMain(3)">我的评论</el-menu-item>
              <el-menu-item index="1-4" @click="clickMain(4)">订单</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <div style="width: 1000px">
        <el-main id="main1" v-if="showMain1" style="width: 1000px;height: 700px;">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="头像">
              <!-- 头衔缩略图 -->
              <pan-thumb :image="form.avatar"/>
              <!-- 文件上传按钮 -->
              <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
              </el-button>
              <image-cropper
                v-show="imagecropperShow"
                :width="300"
                :height="300"
                :key="imagecropperKey"
                url="/upload/avatar"
                field="file"
                @close="close"
                @crop-upload-success="cropSuccess"
              />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="form.sex" placeholder="请选性别">
                <el-option label="男" :value="2"></el-option>
                <el-option label="女" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">立即创建</el-button>
              <el-button @click="congz">重置</el-button>
            </el-form-item>
          </el-form>
        </el-main>
        <el-main id="main2" v-if="showMain2" style="width: 1000px;height: 700px;">
          <div style="align-items: center">
            <div>
              <form @submit.prevent="changePassword">
                <div>
                  <label for="oldPassword">原密码：</label>
                  <input type="password" id="oldPassword" v-model="oldForm.password">
                </div>
                <div>
                  <label for="newPassword">新密码：</label>
                  <input type="password" id="newPassword" v-model="newForm.newPassword">
                </div>
                <div>
                  <label for="confirmPassword">确认密码：</label>
                  <input type="password" id="confirmPassword" v-model="form.password">
                </div>
              </form>
            </div>
            <el-button type="primary" @click="onUpdateOrInsertSubmit()">提交</el-button>
          </div>
        </el-main>
        <el-main id="main3" v-if="showMain3" style="width: 1000px;height: 700px;">
          <div>
            <template>
              <el-table
                :data="tableComment"
                border
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="讲师id"
                >
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="会员昵称"
                >
                </el-table-column>
                <el-table-column
                  prop="content"
                  label="评论内容"
                >
                </el-table-column>
                <el-table-column
                  prop="eduModified"
                  label="创建时间"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="150px"
                >
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="UpeComment(scope.row.id)"
                               type="primary"
                               size="small">修改</el-button>
                    <el-button @click.native.prevent="DelComment(scope.row.id)"
                               type="primary"
                               size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination
                :page-count="page.pages"
                @current-change="handleCurrent"
                background
                layout="prev, pager, next">
              </el-pagination>

              <el-dialog
                :close-on-click-modal="false"
                :show-close="false"
                title="修改评论"
                :visible.sync="dialogCommentVisible"
                width="30%"
              >
                <el-form ref="VideoForm" :model="CommentForm" label-width="80px">
                  <el-form-item label="评论">
                    <el-input v-model="CommentForm.content"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="fanComment">返回</el-button>
                    <el-button type="primary" @click="addComment">修改评论</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
            </template>
          </div>
        </el-main>
        <el-main id="main4" v-if="showMain4" style="width: 1000px;height: 700px;">
          <div>
            <template>
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="orderNo"
                  label="订单号"
                >
                </el-table-column>
                <el-table-column
                  prop="nickname"
                  label="用户名"
                >
                </el-table-column>
                <el-table-column
                  prop="courseTitle"
                  label="课程标题"
                >
                </el-table-column>
                <el-table-column
                  prop="courseCover"
                  label="课程内容"
                >
                </el-table-column>
                <el-table-column
                  prop="payType"
                  label="支付类型"
                >
                  <template slot-scope="scope">
                    {{scope.row.payType===1?'微信':'支付宝'}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="totalFee"
                  label="金额"
                >
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="订单状态"
                >
                  <template slot-scope="scope">
                    {{scope.row.payType===1?'已支付':'未支付'}}
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click.native.prevent="getOrderInfo(scope.row.id)"
                               type="primary"
                               size="small">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <el-pagination
                :page-count="page.pages"
                @current-change="handleCurrentChange"
                background
                layout="prev, pager, next">
              </el-pagination>

            </template>
          </div>
          <el-dialog
            :close-on-click-modal="false"
            title="订单详情"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <el-form ref="forms" :model="order" label-width="80px">
              <span style="font-size: larger; font-weight: bold;">课程标题</span>&nbsp;&nbsp; {{order.courseTitle}}<br>
              <span style="font-size: larger; font-weight: bold;">课程内容:</span>&nbsp;&nbsp; {{order.courseCover}}<br>
              <span style="font-size: larger; font-weight: bold;">讲师名称:</span>&nbsp;&nbsp; {{order.teacherName}}<br>
              <span style="font-size: larger; font-weight: bold;">购买人昵称:</span>&nbsp;&nbsp; {{order.nickname}}<br>
              <span style="font-size: larger; font-weight: bold;">购买人手机:</span>&nbsp;&nbsp; {{order.mobile}}<br>
              <span style="font-size: larger; font-weight: bold;">购买金额:</span>&nbsp;&nbsp; {{order.totalFee}}<br>
              <span style="font-size: larger; font-weight: bold;">支付方式:</span>&nbsp;&nbsp; {{order.status===1 ? '微信' : '支付宝'}}<br>
              <span style="font-size: larger; font-weight: bold;">购买人昵称:</span>&nbsp;&nbsp; {{order.nickname}}<br>
              <span style="font-size: larger; font-weight: bold;">订单状态:</span>&nbsp;&nbsp; {{order.payType===1 ? '已支付' : '未支付'}}

            </el-form>
          </el-dialog>
        </el-main>
      </div>
    </el-container>
  </div>
</template>

<script>
import ImageCropper from '../components/ImageCropper/index.vue'
import PanThumb from '../components/PanThumb/index.vue'
import {getList, saveOrUpdate, saveOrUpdateMember, updateMember} from "../api/member";
import cookie from "js-cookie";
import { getListOrder, getOrder} from "../api/orders";
import {delComment, getListComment, saveOrUpdateComment, xiangComment} from "../api/comment";

export default {
  components: {ImageCropper, PanThumb},
  data() {
    return {
      page:{
        total: 0,
        pageSize: 4,
        pageNum: 1,
        pages:0,
      },
      CommentForm: {
        id: '',
        memberId: '',
        nickname: '',
        content: '',
      },
      dialogVisible: false,
      dialogCommentVisible: false,
      order: {},
      comments: {},
      tableData: [],
      tableComment: [],
      newForm:{
        id: '',
        newPassword: ''
      },
      oldForm: {
        id: '',
        passwords: ''
      },
      comForm: {
        member_id: '',
        content: '',
      },
      form: {
        id: '',
        nickname: '',
        sex: '',
        age: '',
        avatar: 'https://lxledu.oss-cn-hangzhou.aliyuncs.com/avatar/default.jpg'
      },
      imagecropperShow: false,
      imagecropperKey: 0,
      memberId: '',
      showMain1: false,
      showMain2: false,
      showMain3: false,
      showMain4: false,
    }
  },
  created() {
    this.showMain1 = true;
    this.memberId = this.$route.query.cId
    if (this.memberId != '') {
      this.onSel();
      this.getTableList()
      this.getComment()
    }

    // console.log(this.$route.query.cId);
  },
  methods: {
    addComment(){
      saveOrUpdateComment(this.CommentForm).then((res)=>{
        this.$message.success("操作成功")
        this.getComment()
        this.dialogCommentVisible=false
      })
    },
    fanComment(){
      this.dialogCommentVisible=false
    },
    UpeComment(cid){
      xiangComment(cid).then(
        res => {
          this.dialogCommentVisible = true
          this.CommentForm=res.data.data
        }
      )

    },
    DelComment(comentid){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delComment(comentid).then((res)=>{
          this.$message("删除成功")
          this.getComment()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleCurrentChange(val){
      this.page.pageNum=val
      this.getTableList();
    },
    handleCurrent(val){
      this.page.pageNum=val
      this.getComment();
    },
    getOrderInfo(oid){
      getOrder(oid).then(
        res => {
          this.dialogVisible = true
          this.order=res.data.data
        }
      )
    },
    getTableList() {
      getListOrder(this.memberId,this.page).then((res)=>{
        console.log(res.data)
        this.tableData = res.data.data.records
        this.page.total=res.data.data.total
        this.page.pages=res.data.data.pages
        this.page.pageSize=res.data.data.size
      })
    },
    getComment(){
      // 我的评论
      getListComment(this.memberId,this.page).then((res)=>{
        console.log(res.data)
        this.tableComment = res.data.data.records
        this.page.total=res.data.data.total
        this.page.pages=res.data.data.pages
        this.page.pageSize=res.data.data.size
      })
    },
    onUpdateOrInsertSubmit() {
      if (this.oldForm.password != null && this.oldForm.password != '') {
        if (this.newForm.newPassword!=null && this.newForm.newPassword!=''&&this.form.password!=''&&this.form.password!=null){
          if (this.newForm.newPassword == this.form.password){
            updateMember(this.oldForm).then((res) => {
              if (res.data.code == 20000) {
                //修改
                saveOrUpdateMember(this.form).then((res) => {
                  window.location.href = "/";
                })
              }
            })
        }else {
            this.$message.error("两个密码不一样")
          }

        }else {
          this.$message.error("密码不能为空")
        }

      } else {
        this.$message.error("原密码不能为空")
      }
    },
    clickMain(num) {
      if (num == 1) {
        this.showMain1 = true;
        this.showMain2=false;
        this.showMain3=false;
        this.showMain4 = false;
      } else if (num == 2) {
        this.showMain1 = false;
        this.showMain2=true;
        this.showMain3=false;
        this.showMain4 = false;
      } else if (num == 3){
        this.showMain1 = false;
        this.showMain2 = false;
        this.showMain3 = true;
        this.showMain4 = false;
      }else {
        this.showMain1 = false;
        this.showMain2 = false;
        this.showMain3 = false;
        this.showMain4 = true;
      }
    },
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.form.avatar = data.data
      this.imagecropperKey = this.imagecropperKey + 1
    },
    onSel() {
      getList(this.memberId).then((res) => {
        this.$set(this.form, 'id', res.data.data.id)
        this.$set(this.oldForm, 'id', res.data.data.id)
        this.$set(this.form, 'nickname', res.data.data.nickname)
        this.$set(this.form, 'sex', res.data.data.sex)
        this.$set(this.form, 'age', res.data.data.age)
        this.$set(this.form, 'avatar', res.data.data.avatar)
        this.$set(this.form, 'mobile', res.data.data.mobile)
      })

    },
    close() {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
    },
    congz() {
      this.form = {
        id: '',
        nickname: '',
        sex: '',
        avatar: ''
      }
    },
    onSubmit() {
      saveOrUpdate(this.form).then((res) => {
        this.$message.success("操作成功");
        cookie.set('guli_ucenter',JSON.stringify(this.form),{domain: 'localhost'})
        window.location.href = "/";
      })
    },



  }
}
</script>


<style>

</style>
